<!-- 订单详情 -->
<template>
	<s-layout title="外部链接">

		<view
				class="bg-white address-box ss-m-b-14 ss-r-b-10"
				@tap="onSelectAddress"
		>
			<s-address-item :item="state.addressInfo" :hasBorderBottom="false">
				<view class="ss-rest-button"><text class="_icon-forward"></text></view>
			</s-address-item>
		</view>

		<uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
			<!-- 平台类型 -->
			<view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
				<text class="item-title">平台类型</text>
				<view class="ss-flex refund-cause ss-col-center">
					<text v-if="state.platformTypeText" class="ss-m-r-20">{{ state.platformTypeText }}</text>
					<text v-else class="ss-m-r-20">请选择平台类型</text>
					<text class="cicon-forward" style="height: 28rpx"></text>
				</view>
			</view>
			<view class="content" v-for="(item, index) in formData.addOrderList">
				<view class="refund-item u-m-b-20">
					<view class="item-title ss-m-b-20">地址输出链接</view>
					<view class="input-box u-flex">
						<uni-easyinput
								v-model="item.url"
								:inputBorder="false"
								paddingLeft="10"
								placeholder="请输入地址输出链接"
						/>
					</view>
				</view>

				<!--留言 -->
				<view class="refund-item">
					<view class="item-title ss-m-b-20">下单需求注释</view>
					<view class="describe-box">
						<uni-easyinput
								v-model="item.description"
								:inputBorder="false"
								autoHeight
								class="describe-content"
								maxlength="120"
								placeholder="客官~请描述您下单需求注释，建议上传照片"
								type="textarea"
						></uni-easyinput>
						<view class="upload-img">
							<uni-file-picker
									ref="uploadStorage"
									v-model="item.pickerVal"
									:auto-upload="false"
									fileMediatype="image"
									limit="1"
									@delete="e => onDelete(e, item)"
									@select="e => onSelect(e, item)"
							>
							</uni-file-picker>
						</view>
					</view>
				</view>
				<button v-if="index >= 1" class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="onDel(item.id)">删除</button>
			</view>
		</uni-forms>
		<!-- 底部按钮 -->
		<su-fixed bottom placeholder>
			<view class="foot-wrap">
				<view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
					<button v-if="!sheep.$helper.isRealEmpty(formData.platformType) && formData.platformType != 6" class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="onAdd">添加</button>
					<button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="onSave">提交</button>
				</view>
			</view>
		</su-fixed>
		<!-- 平台类型弹窗 -->

		<su-popup :show="state.showModal" :showClose="true" round="10" @close="state.showModal = false">
			<view class="modal-box page_box">
				<view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center"
				>平台类型
				</view
				>
				<view class="modal-content content_box">
					<radio-group @change="onChange">
						<label
								v-for="item in state.platformTypeList"
								:key="item.dictValue"
								class="radio ss-flex ss-col-center"
						>
							<view class="ss-flex-1 ss-p-20">{{ item.dictLabel }}</view>
							<radio
									:checked="item.dictValue == state.currentValue"
									:value="item.dictValue"
									color="var(--ui-BG-Main)"
							/>
						</label>
					</radio-group>
				</view>
				<view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
					<button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onPlatformType"
					>确定
					</button
					>
				</view>
			</view>
		</su-popup>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {onLoad} from '@dcloudio/uni-app';
import {reactive, ref} from 'vue';
import {baseUrl} from "@/sheep/config";
import {isEmpty} from "lodash";

const form = ref(null);
const state = reactive({
	disabled: false,
	addressInfo: {},
	showModal: false,
	currentValue: 0,
	platformTypeText: '',
	platformTypeList: [],
});
const formData = reactive({
	platformType: null,
	addressId: null,
	addOrderList: []
});
const rules = reactive({});

async function uploadFiles(urls, item) {
	if (urls.length === 0) {
		return; // 所有文件上传完成，结束递归
	}

	const filePath = urls[0];

	try {
		const res = await uni.uploadFile({
			url: baseUrl + '/no-auth/oss/upload',
			filePath: filePath,
			name: 'file'
		});

		if (res.statusCode === 200) {
			let data = JSON.parse(res.data);
			if (!sheep.$helper.isRealEmpty(data.url)) {
				item.imgUrl = data.url;
			} else {
				sheep.$helper.toast(`图片${i + 1}上传失败，请稍后重新上传`);
			}
		}

	} catch (error) {
		sheep.$helper.toast(`图片${i + 1}上传失败，请稍后重新上传`);
	}

	await uploadFiles(urls.splice(1));
}

async function onSave() {
	uni.showLoading({
		title: '上传中...',
		mask: true
	});

	try {
		for (let addOrderListElement of formData.addOrderList) {
			addOrderListElement.imgUrl = '';
			await uploadFiles(addOrderListElement.imgUrlList, addOrderListElement);
		}

		uni.hideLoading();

		if (sheep.$helper.isRealEmpty(formData.platformType)) {
			sheep.$helper.toast('请选择平台类型');
			return;
		}

		for (let addOrderListElement of formData.addOrderList) {
			if (sheep.$helper.isRealEmpty(addOrderListElement.url)) {
				sheep.$helper.toast('请填写商品链接');
				return;
			}
		}

		await sheep.$api.order.addOrder(formData).then(res => {
			state.currentRes = res;
			sheep.$router.back();
		})
	} catch (error) {
		uni.hideLoading();
		console.error(error);
	}
}

function onSelect(e, item) {
	console.log(e, 'select')
	console.log(item.imgUrlList, 'imgUrlList')
	const tempFilePaths = e.tempFilePaths
	item.imgUrlList.push(tempFilePaths[0])
}

function onDelete(e, item) {
	console.log(e, 'delete')
	console.log(item.imgUrlList, 'imgUrlList-delete-before')
	item.imgUrlList.splice(e.tempFilePath, 1)
	console.log(item.imgUrlList, 'imgUrlList-delete-after')
}

//选择平台类型
function onChange(e) {
	console.log(e, 'change')
	state.currentValue = e.detail.value;
	state.platformTypeList.forEach((item) => {
		if (item.dictValue === e.detail.value) {
			state.platformTypeText = item.dictLabel
		}
	});
}

//确定
function onPlatformType() {
	console.log(state.currentValue, 'currentValue')
	formData.platformType = state.currentValue;
	state.showModal = false;
}

function onAdd() {
	let obj = {
		id: sheep.$helper.guid(),
		url: null,
		imgUrl: null,
		imgUrlList: [],
		description: null
	}
	formData.addOrderList.push(obj);
}

function onDel(id) {
	let index = formData.addOrderList.findIndex( e => e.id == id);
	formData.addOrderList.splice(index, 1)
}

onLoad(async (options) => {
	await changeConsignee();
	let hotRes = await sheep.$api.order.channelList({type: 'account_type'});
	console.log(hotRes)
	state.platformTypeList = hotRes;
	let obj = {
		id: sheep.$helper.guid(),
		url: null,
		imgUrl: null,
		imgUrlList: [],
		description: null
	}
	formData.addOrderList.push(obj);
});

// 选择地址
function onSelectAddress() {
	uni.$once('SELECT_ADDRESS', (e) => {
		changeConsignee(e.addressInfo);
	});
	sheep.$router.go('/pages/user/address/list');
}

// 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) {
	if (isEmpty(addressInfo)) {
		const res = await sheep.$api.user.address.default();
		if (!isEmpty(res)) {
			addressInfo = res;
		}
	}
	if (!isEmpty(addressInfo)) {
		state.addressInfo = addressInfo;
		formData.addressId = state.addressInfo.id;
	}
}
</script>

<style lang="scss" scoped>
.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	// margin-bottom: 20rpx;
}

// 售后项目
.refund-item {
	background-color: #fff;
	border-bottom: 1rpx solid #f5f5f5;
	padding: 30rpx;

	&:last-child {
		border: none;
	}

	// 留言
	.describe-box {
		width: 690rpx;
		background: rgba(249, 250, 251, 1);
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.describe-content {
			height: 200rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333;
		}
	}

	// 联系方式
	.input-box {
		height: 84rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
	}
}

.goods-box {
	background: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.foot-wrap {
	height: 100rpx;
	width: 100%;
}

.foot_box {
	height: 100rpx;
	background-color: #fff;

	.sub-btn {
		width: 100%;
		line-height: 74rpx;
		border-radius: 38rpx;
		color: rgba(#fff, 0.9);
		font-size: 28rpx;
	}

	.contcat-btn {
		width: 336rpx;
		line-height: 74rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 38rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
}

.modal-box {
	width: 750rpx;
	// height: 680rpx;
	border-radius: 30rpx 30rpx 0 0;
	background: #fff;

	.modal-head {
		height: 100rpx;
		font-size: 30rpx;
	}

	.modal-content {
		font-size: 28rpx;
	}

	.modal-foot {
		.close-btn {
			width: 710rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
}

.success-box {
	width: 600rpx;
	padding: 90rpx 0 64rpx 0;

	.cicon-check-round {
		font-size: 96rpx;
		color: #04b750;
	}

	.success-title {
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
	}

	.success-btn {
		width: 492rpx;
		height: 70rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
		border-radius: 35rpx;
	}
}
</style>
